<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }
    
        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="/static/js/babylon.js"></script>
<script src="/static/js/babylon.inspector.bundle.js"></script>
<script src="/static/js/babylon.loader.min.js"></script>
<script src="/static/js/babylon-helper.js"></script>
<script>
    var canvas = document.getElementById('renderCanvas');
    var engine = new BABYLON.Engine(canvas, true),
        camera,
        scene,
        light;

    main();

    async function createScene() {
        scene = new BABYLON.Scene(engine);
        camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 500, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);
        
        // camera.setPosition(new BABYLON.Vector3(-2870, 1907, 1600));
        camera.setTarget(BABYLON.Vector3.Zero());

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(10, 10, 10));
        light.diffuse = new BABYLON.Color3(1, 0, 0);
        light.specular = new BABYLON.Color3(1, 1, 1);
        light.groundColor = new BABYLON.Color3(1, 0, 0);
        light.intensity = 10.0;
        
        const buildingGroup = new BABYLON.Mesh("builds", scene);
        const objData = await BABYLON.SceneLoader.ImportMeshAsync("", "/static/", "jingmao.obj", scene);
        const group = objData.meshes[0];

        // const building = group.getChildren().find(n => n.name === "经贸府");
        group.scaling.scaleInPlace(0.1);
        group.position = new BABYLON.Vector3(0, 0, 0);
       

        var mainNodeMat = await BABYLON.NodeMaterial.ParseFromSnippetAsync("#G6AHRC#4", scene);
        mainNodeMat.name = "mainBulidingNodeMat";
        group.material = mainNodeMat;

        // building.material = mainNodeMat;
        // console.log(building);

        // objData.meshes.forEach(mesh => {
        //     mesh.scaling.scaleInPlace(0.1);
        //     mesh.parent = buildingGroup;
        // });

        // var mainNodeMat = await BABYLON.NodeMaterial.ParseFromSnippetAsync("#G6AHRC#4", scene);
        // mainNodeMat.name = "mainBulidingNodeMat";

        // const buildingMeshes = buildingGroup.getChildMeshes();
        // const buildingMesh = buildingMeshes.find(mesh => mesh.name.includes('map.osm_buildings_map.osm_buildings_wall'));
        // console.log(buildingMesh);

        // buildingMesh.material = mainNodeMat;

        return scene;
    }

    async function main() {
        scene = await createScene();
        scene.debugLayer.show();

        BabylonHelper.showAxis(scene, 100);

        engine.runRenderLoop(function() {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    }
        
   


</script>
</body>
</html>